<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style media="screen">
    body{
        padding-top: 1.5rem;
    }
    .header{
          width: 94%;
          height: 3rem;
          line-height: 3rem;
          padding: 0.5rem 0.8rem;
          text-align: center;
          position: fixed;
          top:1.5rem;
          background-color: #fff;
          z-index: 999;
      }
    .header_img{
      width: 10%;
      height: 58%;
      float: left;
      margin-top: 0.5rem;
    }
    .header_imgs{
      width: 8%;
      height: 58%;
      margin-top: 0.5rem;
      margin-left: 1rem;
    }
    .header_imgs img{
      width: 100%;
      height: 100%;
    }
    .header_img img{
      width: 100%;
      height: 100%;
    }
    .header h3{
      width: 50%;
      text-align: center;
      line-height: 3rem;
      margin-left: 3rem;
    }
    .fr{
      float: right;
    }
    .fl{
      float: left;
    }
    .nav{
      width: 100%;

      margin-top: 3.5rem;
      border-bottom: 0.3rem solid rgb(242, 242, 242, 0.5);
    }
    .ba{
      width: 100%;
      height:10rem;
      position: relative;
    }
    .ba img{
      width: 100%;
      height: 100%;
    }
    .ef{
      width: 23%;
      height: 11%;
      position: absolute;
      top:25%;
      left: 5%;
    }
    .ef img{
      width: 100%;
      height: 100%;
    }
    .ef_top{
      width: 93%;
      height: 5rem;
      padding: 0.5rem 0.8rem;
      margin-top: 3rem;
      padding-bottom: 1rem;
      border-bottom:1px solid rgb(242, 242, 242, 0.5);
    }
    .ef_top p{
      color: #ccc;
      font-size: 1rem;
      margin-top: 0.7rem;
    }
    .main{
      width: 93%;
      height: 1rem;
      line-height: 1rem;
      padding: 0.8rem 0.8rem;
    }
    .main_img{
      width: 4%;
      height:100%;
      margin-right: 0.5rem;
    }
    .main_img img{
      width: 100%;
      height: 100%;
    }
    .main a{
      color: #4c629c;
    }
    .all{
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      padding: 0rem 0rem 0.3rem 0rem;
      background-color: rgb(242, 242, 242, 0.5);
    }
    .all ul{
      background-color: #fff;
      height: 3rem;
      width: 94%;
      padding: 0rem 0.8rem;
    }
    .all ul li{
      float: left;
      width: 25%;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
    }
    .all ul li a{
      list-style: none;
      text-decoration: none;
      color: black;
      font-weight: bold;
    }
    #lia{
      color: #40cccc;
        border-bottom: 0.2rem solid #40cccc;
    }
    .now{
      width: 94%;
      padding: 1rem 0.8rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .now_one{
      width: 48%;
      margin-top: 1rem;
      height: 14.5rem;
    }
    .one_img{
      width: 100%;
      height: 9rem;
    }
    .one_img img{
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <div class="header">
      <div class="header_img">
        <img src="../image/u6.png" alt="" onclick="closewin()">
      </div>
      <h3 class="fl">品牌详情</h3>
      <div class="header_imgs fr">
        <img src="../image/aaw.png" alt="" onclick="closewin('shop')">
      </div>
      <div class="header_imgs fr">
        <img src="../image/u36.png" alt="" onclick="closewin('shop')">
      </div>

    </div>
    <div class="nav">
      <div class="ba">
        <img src="../image/a8.png" alt="">
      </div>
      <div class="ef">
        <img src="../image/u53.png" alt="">
      </div>
      <div class="ef_top">
        <h3></h3>
        <p></p>
      </div>
      <div class="main">
        <div class="main_img fl">
          <img src="../image/aa1.png">
        </div>
        <a href="#"></a>
      </div>
      <div class="main">
<!--        <div class="main_img fl">
          <img src="../image/a35.png">
        </div>-->
        <p></p>
      </div>
    </div>
    <!-- 全部 -->
    <div class="all">
      <ul>
        <li ><a href="#" id="lia">全部</a></li>
        <li><a href="#">3-6岁</a></li>
        <li><a href="#">暑假班</a></li>
        <li><a href="#">综合能力</a></li>
      </ul>
    </div>
    <div class="now">
      <div class="now_one">
        <div class="one_img">
          <img src="../image/u28.jpg" alt="">
        </div>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem;">3-6岁探索课程</p>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">培养软技能帮助性格养成</p>
        <p style="font-size:1.1rem;margin-top:0.5rem;">￥2800.80</p>
      </div>
      <div class="now_one">
        <div class="one_img">
          <img src="../image/u28.jpg" alt="">
        </div>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem;">3-6岁探索课程</p>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">培养软技能帮助性格养成</p>
        <p style="font-size:1.1rem;margin-top:0.5rem;">￥2800.80</p>
      </div>
      <div class="now_one">
        <div class="one_img">
          <img src="../image/u28.jpg" alt="">
        </div>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem;">3-6岁探索课程</p>
        <p style="color:#ccc;font-size:0.9rem;margin-top:0.5rem">培养软技能帮助性格养成</p>
        <p style="font-size:1.1rem;margin-top:0.5rem;">￥2800.80</p>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
